<template>
	<view class="loading" v-if="ready">
		<view class="static-loading-wrapper" :hidden="!ready">
			<view class="loadimg">
				<u-loading size="80"></u-loading>
			</view>
			<!-- <image src="/static/loading-icon.png" mode="widthFix" class="loadimg"></image> -->
			<view class="loadtips">加载中..</view>
		</view>
	</view>
</template>

<script>
export default {
	props: {
		ready:{
			type:Boolean,
			default:true
		},
	},
	data() {
		return {

		}
	},
};
</script>

<style scoped lang="scss">

@keyframes quan {
	0% {
		-webkit-transform: rotate(0);
		transform: rotate(0);
	}
	to {
		-webkit-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}
.static-loading-wrapper {
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: 9999;
	background-color: #fff;
}
.loadtips {
	position: fixed;
	color: #333;
	font-family: 'NotoSans-Light, NotoSans-Light-Edge, Arial, Helvetica, sans-serif';
	font-size: 16px;
	width: 100%;
	height: 16px;
	top: 70px;
	bottom: 0;
	margin: auto;
	text-align: center;
}
.loadimg {
	width: 100rpx;
	height: 100rpx;
	position: fixed;
	top: -0px;
	bottom: 0;
	right: 0;
	left: 0;
	margin: auto;
	text-align: center;
	// animation: quan 0.7s linear infinite;
}
</style>
